<template>
  <div class="com-download">
    <van-divider
      :style="{color: '#323233', borderColor: '#1989fa', padding: '0 88px', fontWeight: 'bold', marginTop: '36px'}"
    >下载客户端</van-divider
    >

    <van-row type="flex" justify="space-between" style="margin-bottom: 16px; padding: 0 16px">
      <van-col span="7">
        <div @click="toHandleIos" class="web_app">
          <van-image :src="iosImg" height="88px" class="web_img" />
          <div class="name">网页版app</div>
        </div>
      </van-col>
      <van-col span="7">
        <div @click="toShowTip" class="web_app">
          <van-image :src="androidImg" height="88px" class="web_img" />
          <div class="name">
            <a style='color:#fff' href="http://jinpin.love/Download/jinpin.apk" class="download_input" target="_self">安卓客户端</a>
          </div>

        </div>
      </van-col>
      <van-col span="7">
        <div @click="toShowTip" class="web_app">
          <van-image :src="androidImg" height="88px" class="web_img" />
          <div class="name">苹果客户端</div>
        </div>
      </van-col>
    </van-row>
    
    <van-divider
      :style="{color: '#323233', borderColor: '#1989fa', padding: '0 60px', fontWeight: 'bold', marginTop: '36px'}"
    >微信扫码或长按识别进入小程序</van-divider
    >
    <van-row type="flex" justify="center" style="margin-bottom: 16px; padding: 0 16px">
      <van-col span="9">
        <div class="web_app">
          <van-image :src="miniWXImg" height="120px" class="web_img" />
        </div>
      </van-col>
    </van-row>
    <van-divider
      :style="{color: '#323233', borderColor: '#1989fa', padding: '0 88px', fontWeight: 'bold', marginTop: '36px'}"
    >温馨提示</van-divider
    >
    <div class="tip">
      <div class="desc">若无法打开或下载app，请点击复制链接到浏览器，即可下载或体验网页版app。</div>
      <van-row
         type="flex"
         justify="space-around"
         align="center"
         style="text-align: center"
         class="tip_link"
      >
        <van-col span="8">
          <div
            v-clipboard:copy="web_url"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            style="color:#1989fa"
          >
            <div class="alignment">复制网页版app链接</div>
          </div>
        </van-col>
        <van-col span="8">
          <div
            v-clipboard:copy="appLik"
            v-clipboard:success="onCopyApp"
            v-clipboard:error="onErrorApp"
            style="color:#1989fa;"
          >
            <div class="alignment">复制安卓app链接</div>
          </div>
        </van-col>
        <van-col span="8">
          <div
            v-clipboard:copy="iosLink"
            v-clipboard:success="onCopyAppleApp"
            v-clipboard:error="onErrorApp"
            style="color:#1989fa;"
          >
            <div class="alignment">复制苹果app链接</div>
          </div>
        </van-col>
      </van-row>
    </div>

  </div>
</template>

<script>
import logoImg from '@/assets/logo.png';
import miniWXImg from '@/assets/miniWXLogo.jpeg';
import {Toast} from "vant";
export default {
  name: "comDownload",
  data(){
    return {
      logoImg,
      miniWXImg,
      androidImg: logoImg,
      iosImg: logoImg,
      web_url: '',
      iosLink: '',
      appLik: '',
    }
  },
  async created() {
    // 发起请求获取下载app的url
    const res = await this.$api.others.reqDownLoadUrl()
    if (res.code === 200) {
      this.iosLink = res.data.ios_url
      this.appLik = res.data.android_url
      this.web_url = res.data.web_url
    }
  },
  methods: {
    toHandleIos() {
      // window.open() 方法用于打开一个新的浏览器窗口
      window.open(this.iosLink, '_blank')
    },
    toShowTip() {
      if (this.appLik) {
        window.open(this.appLik, '_blank')
      }
    },
    onCopy(e) {
      Toast('复制成功, 将网址粘贴到浏览器中即可使用近聘网页版app！')
    },
    onError(e) {
      Toast('复制出错')
    },
    onCopyApp(e) {
      Toast('复制成功, 将网址粘贴到浏览器中即可下载近聘安卓客户端！')
    },
    onCopyAppleApp() {
      Toast('复制成功, 将网址粘贴到浏览器中即可下载近聘苹果客户端！')
    },
    onErrorApp(e) {
      Toast('复制出错')
    }
  },
}
</script>

<style lang="scss" scoped>
.com-download{
  width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
  font-size: 12px;
  .web_app {
    position: relative;
    height: 90px;
    .web_img {
      width: 100%;
      vertical-align: bottom;
    }
    .name {
      top: 56px;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      margin: 0 auto;
      color: #ffffff;
      font-size: 16px;
    }
  }
  .tip {
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 14px;
    .desc {
      margin-bottom: 20px;
      line-height: 1.6em;
      letter-spacing: 1.3px;
      text-align: justify;
      text-indent: 2em;
    }
    .tip_link {
      font-size: 12.6px;
      margin-bottom: 36px;
    }
  }
}
</style>
